<template>
	<div>
		<div class="main_operation">
			<div class="operation_left">
				<!-- <a-button class="mr10" type="primary" @click="addBtn">添加</a-button> -->
				<!-- <a-button class="mr10" type="danger" @click="batchDelBtn">批量删除</a-button> -->
				<!-- <a-button class="mr10" type="primary">手动排序</a-button> -->
				<!-- <a-button type="primary"  @click="exportBtn">导出设备</a-button> -->
			</div>
			<div class="operation_right">
				<a-select class="mr10" style="width: 150px" placeholder="定时任务">
					<a-select-option value="jack">全部</a-select-option>
					<a-select-option value="lucy">Lucy</a-select-option>
				</a-select>
				<!-- <a-range-picker class="mr10" :placeholder="['开始时间', '结束时间']" /> -->
				<a-button type="primary">搜索</a-button>
			</div>
		</div>
		<div class="main">
			<a-table :pagination="false" :loading="tableLoad" 
				:columns="Fields" :dataSource="dataLists.data"
				:rowKey="record => record.id" 
				:scroll="{x: 1000, y: 500 }">
				<!-- <template slot="action" slot-scope="text, record"> -->
					<!-- <a-button size="small" class="mr5" type="primary" @click="editBtn(record)">编辑</a-button> -->
					<!-- <a-button size="small" type="danger" @click="delBtn(record)">删除</a-button> -->
				<!-- </template> -->
			</a-table>
			<div class="pageBox">
				<a-pagination
					:total="dataLists.total"
					:showTotal="total => `共 ${total} 条数据`"
					:pageSize="dataLists.per_page"
					:defaultCurrent="1"
					@change="pageChange"
				/>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapState, mapActions } from 'vuex';
	export default {
		name: "List",
		data() {
			return {
				/* 通用模块 */
				//列表
				tableLoad: false, //列表loading状态
				formList: { //列表请求信息
					page: 1
				},
				/* 通用模块end */
			}
		},
		computed: {
			...mapState({
				Fields: state => state.equipProtocol.Fields,
				dataLists: state => state.equipProtocol.dataLists,
				requestCode: state => state.equipProtocol.requestCode,
				itemDetail: state => state.equipProtocol.itemDetail,
				permissAll: state => state.equipProtocol.permissAll,
				groupData: state => state.group.groupData,
			}),
		},
		mounted() {
			this.changeData()
		},
		methods: {
			...mapActions({
				getLists: 'equipProtocol/getLists', //列表
				dataDel: 'equipProtocol/dataDel', //删除
				dataDetail: 'equipProtocol/dataDetail', //详情
			}),
			/* 通用模块 */
				// 勾选
			onSelectChange(selectedRowKeys) {
				console.log('selectedRowKeys changed: ', selectedRowKeys);
				this.selectedRowKeys = selectedRowKeys
			},
			//搜索
			onSearch(val) {
				alert('未接入')
				this.formList = {
					name: val,
					page: 1
				};
				this.changeData();
			},
				// 重新获取列表数据
			changeData(){
				this.tableLoad = true
				setTimeout(()=> {
					this.getLists(this.formList)
					this.tableLoad = false
				}, 800);
			},
				// 页码
			pageChange(page) {
				this.formList.page = page;
				this.getLists(this.formList)
			},
			/* 通用模块end */

			//添加跳转
			addBtn() {
				const tabsKey = '2'
				this.$router.push({
						path:'/equipment/Add',
						query: {
								tabsKey: tabsKey
						}
				})
			},
			// 编辑跳转
			editBtn(item) {
				const tabsKey = '2'
				this.$router.push({
						path:'/equipment/Edit',
						query: {
							treatyId:item.id,
							tabsKey: tabsKey
						}
				})
			 },
			//删除
			delBtn(item){
        const _this = this
				this.$confirm({
					title: `您确定要删除该数据吗?`,
					content: `删除后将不可恢复,请仔细核对!`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk() {
						_this.dataDel(item.id)
						_this.changeData()
					},
				});
			},
			//批量删除
			batchDelBtn(){
				if(this.selectedRowKeys.length <= 0) {
					this.$warning({
						title: '提示',
						content: '请先勾选需要删除的设备',
					});
					return false
				}
				const _this = this
				let idArr = {
					ids: this.selectedRowKeys
				}
				this.$confirm({
					title: `您确定要删除勾选的设备吗?`,
					content: `删除后将不可恢复,请仔细核对!`,
					okText: '确定',
					okType: 'danger',
					cancelText: '取消',
					onOk() {
						_this.dataDel(idArr)
						_this.changeData()
					},
				});
			},
			/* 详情 */
			details(item){
				this.detaiVisible = true
				this.detailsLoad = true
				this.dataDetail(item.id)
				setTimeout(()=>{
					this.detailsLoad = false
				},800)
			},
			exportBtn(){
				alert('未开发')
			}
		}
	}
</script>

<style scoped>

</style>
